<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ECharts">
    <meta name="author" content="kener.linfeng@gmail.com">
    <title>ECharts · Feature</title>

    <link rel="shortcut icon" href="./asset/ico/favicon.png">

    <link href="./asset/css/font-awesome.min.css" rel="stylesheet">
    <link href="./asset/css/bootstrap.css" rel="stylesheet">
    <link href="./asset/css/carousel.css" rel="stylesheet">
    <link href="./asset/css/echartsHome.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>

<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->

<div class="container marketing">

    <div class="row featurette">
        <h2 class="featurette-heading">Architecture</h2>

        <div class="col-md-7 pull-right" style="padding:0;margin-top:-60px;">
            <img src="./asset/img/architecture.png" alt="ECharts Architecture" style="max-width: 100%;"/>
        </div>
        <p class="lead">ECharts (Enterprise Charts)</p>

        <p>ECharts is a comprehensive charting library offering a painless way of adding interactive charts to your
            commercial products. On the foundation of <a href="http://ecomfe.github.io/zrender/"
                                                         target="_blank">ZRender</a>-based (a whole new lightweight
            canvas library) coordinate system, legend, tooltip, toolbox and other basic components, ECharts currently
            supports line, column, scatter, pie, radar, candlestick, chord, gauge, funnel, map and force-directed chart
            types, many of these can be combined in one chart.</p>

        <div style="float:left;margin:20px 10px 30px 10px;"><img src="./asset/img/device.png" alt="Echarts device"/>
        </div>
        <div>
            <img src="./asset/img/explorer.png" alt="Echarts explorer"/>

            <div>
                <small>&nbsp;&nbsp;Compatible with most common browsers — including IE6/7/8/9+, Chrome, Firefox, Safari
                    and Opera. <i><br/>&nbsp;&nbsp;(IE8- powered by <a href="https://code.google.com/p/explorercanvas/"
                                                                       target="_blank">excanvas</a> )</i></small>
            </div>
        </div>
        <p style="float:right;text-align:right;"><strong>-- Open source from the team of Baidu business front-end data
            visualization</strong><br/><span><a href="http://im.baidu.com/" target="_blank">Baidu Hi</a> : 1379172 | <a
            href="mailto:echarts(a)baidu.com">echarts(a)baidu.com</a></span></p>
    </div>

    <div class="row featurette">
        <img src="./asset/img/why-echarts-m-en.png" alt="Why Echarts?"
             style="float:right;width:180px;margin-right:30px;"/>

        <h2 class="featurette-heading">Features</h2>

        <p>You are cordially invited to view the document "<a href="./slide/whyEcharts-en.html" target="_blank">Why
            ECharts?</a>" online, which covers all the chart types and major features of ECharts.<br/>
            <small>*Since some features of the document don't work with IE8-, you are specifically recommended to read
                the document in IE9+, Chrome, Firefox, Safari, Opera or other modern browsers.
            </small>
        </p>
    </div>

    <div class="row featurette">
        <div class="col-md-5">
            <img src="./asset/img/mix.jpg" alt="Echarts mix"/>
        </div>
        <div class="col-md-7">
            <h2 class="featurette-heading">Combinations</h2>

            <p>Compared with a single chart, a combination of charts can be more expressive and more interesting.
                ECharts supports any combination of any chart provided herein (a total of 11 types and 17 subtypes)
                : </p>

            <p>Line (area), column (bar), scatter (bubble), candlestick,<br/>Pie (doughnut), radar, map, chord, gauge,
                funnel, force-directed chart. </p>

            <p>A standard combination chart contains a legend, toolbox, data area zoom, scale roaming module, a
                Cartesian coordinate system (which may have one or two category/value axis/axes). </p>
        </div>
    </div>

    <div class="row featurette">
        <div class="col-md-6">
            <h2 class="featurette-heading">Drag-Recalculate</h2>

            <p>Our "Drag-Recalculate" feature (patented) brings you the best user experience ever: by allowing you to
                effectively extract, integrate, or even exchange data among multiple charts, ECharts open you up every
                opportunity for data mining and integration.</p>
        </div>
        <div class="col-md-6">
            <img src="./asset/img/draggable.gif" alt="Echarts Drag-Recalculate"/>
        </div>
    </div>

    <div class="row featurette">
        <div class="col-md-6">
            <img src="./asset/img/dataView.gif" alt="Echarts dataView"/>
        </div>
        <div class="col-md-6">
            <h2 class="featurette-heading">Data View</h2>

            <p> If the data means a lot to you, simply viewing the visualized data will no longer be satisfying, and
                you'll start to wish that you can download, save, share, or even process and integrate the original
                data.</p>

            <p>Now, it ceased to be a dream as we give you a comma-delimited data text, which is our Data View. Of
                course, you can always reload the output method of Data View to present your data your way. </p>

            <p>Moreover, via Data View you the wise can even edit your data and update the chart, which, compared with
                Drag-Recalculate, is batch operation!</p>
        </div>
    </div>

    <div class="row featurette">
        <div class="col-md-7">
            <h2 class="featurette-heading">Magic Switch</h2>

            <p>All charts present data. However, it's hard to tell which one is best since the performance depends on so
                many things: data itself, user's need, personal preference, etc. For example, it's always a big headache
                to choose between bar and line, stack and tile. </p>

            <p>With our Magic Switch, you can switch your chart effortlessly! Try to switch from bar to line, stack to
                tile, and you may well understand what suits you best.</p>
        </div>
        <div class="col-md-5">
            <img src="./asset/img/magicType.gif" alt="Echarts Magic Switch"/>
        </div>
    </div>

    <div class="row featurette">
        <div class="col-md-6">
            <img src="./asset/img/legendSelected.gif" alt="Echarts Legend Switch"/>
        </div>
        <div class="col-md-6">
            <h2 class="featurette-heading">Legend Switch</h2>

            <p>Multi-series of data show you multiple things, but how to focus on the single series that matters? </p>

            <p>With our Legend Switch, you can turn off other series and focus on the series you are interested in with
                just a click. </p>
        </div>
    </div>

    <div class="row featurette">
        <div class="col-md-6">
            <h2 class="featurette-heading">Area Zoom</h2>

            <p>Data can be infinite, but the display space is always limited. So you need Area Zoom to help you zoom in
                on a selected data area that you care about. </p>

            <p>Powered by great capability of data analysis, the Extreme MarkPoint and the Average MarkLine are always
                moving in lockstep. Try <a href="./example/mix10.html#-en" target="_blank">this 》</a></p>
        </div>
        <div class="col-md-6">
            <img src="./asset/img/datazoom.gif" alt="Echarts Area Zoom"/>
        </div>
    </div>

    <div class="row featurette">
        <div class="col-md-4">
            <img src="./asset/img/connect.gif" alt="Echarts Chart Linkage"/>
        </div>
        <div class="col-md-8">
            <h2 class="featurette-heading">Chart Linkage</h2>

            <p>You've got multiple series of data to plot. They're associated and inseparable. But if you put them into
                one chart, it would be a mess sometimes. What could you do?</p>

            <p>With the Chart Linkage of ECharts, multiple charts can be easily linked up. And it's not just about
                displaying informative tooltips when hovered over; it's about sharing components and events, and
                stitching together automatically when saved as image. Try <a href="./example/mix8.html#-en"
                                                                             target="_blank">this 》</a></p>
        </div>
    </div>

    <div class="row featurette">
        <div class="col-md-7">
            <h2 class="featurette-heading">Scale Roaming</h2>

            <p>The colors in a Cartesian chart (like map or scatter) will help you to classify data at first
                glance. </p>

            <p>But how to focus on data that matters after the initial analysis? With our Scale Roaming, you can turn
                off other scales and focus on the scale you are interested in with just a click.</p>
        </div>
        <div class="col-md-5">
            <img src="./asset/img/dataRange.gif" alt="Echarts Scale Roaming"/>
        </div>
    </div>

    <div class="row featurette">
        <div class="col-md-4">
            <img src="./asset/img/effect.gif" alt="Echarts Glow Effect"/>
        </div>
        <div class="col-md-8">
            <h2 class="featurette-heading">Glow Effect</h2>

            <p> We know that sometimes you gotta catch the eye. </p>

            <p>ECharts allow you to add a <a href="./example/map12.html#-en" target="_blank">glow effect</a> to the
                MarkPoints and MarkLines of your charts or maps in the twinkling of an eye. Here is an example of how
                twinkling it can be: <a href="./example/map11.html#-en" target="_blank">simulation of Baidu
                    migration.</a></p>
        </div>
    </div>

    <div class="row featurette">
        <div class="col-md-7">
            <h2 class="featurette-heading">Big Data Mode</h2>

            <p>Got tens of millions of data to present? And once again professional statistical tools (e.g. MATLAB)
                seems like the only option left?</p>

            <p>Nope, not anymore! Despite rich interactivity, ECharts can still plot up to 200,000 data points on a
                Cartesian chart (line, column, scatter, and candlestick) in the blink of an eye. For conventional
                applications, modern browsers would be all you need to show a million data points.</p>
        </div>
        <div class="col-md-5">
            <img src="./asset/img/scatter.gif" alt="Echarts Large Scale Scatter"/>
        </div>
    </div>

    <div class="row featurette">
        <div class="col-md-3">
            <img src="./asset/img/dynamic1.gif" alt="Echarts Data Streaming"/>
        </div>
        <div class="pull-left">
            <img src="./asset/img/dynamic2.gif" alt="Echarts Data Streaming" style="height:175px"/>
        </div>
        <div class="col-md-6">
            <h2 class="featurette-heading">Data Streaming</h2>

            <p>If you need to display up-to-second data, data streaming charts really hit the spot, for they will
                automatically update themselves every 'n' seconds by getting new data from the server. </p>
        </div>
    </div>

    <div class="row featurette">
        <div class="col-md-6">
            <h2 class="featurette-heading">Auxiliary Line</h2>

            <p>Trend line, average line, ascending trend channel, support… of course you know how to use them. </p>

            <p> ECharts allow you to add auxiliary lines not only on candlestick – which is a must – but also on every
                single chart type we support.</p>
        </div>
        <div class="col-md-6">
            <img src="./asset/img/mark.gif" alt="Echarts Auxiliary Lines"/>
        </div>
    </div>

    <div class="row featurette">
        <div class="col-md-6">
            <img src="./asset/img/multiStack.png" alt="Echarts Multi-Series Stacking"/>
        </div>
        <div class="col-md-6">
            <h2 class="featurette-heading">Multi-Series Stacking</h2>

            <p>ECharts is much smarter than you thought: with our auto-scaling graph entities and Cartesian coordinate
                system, you can stack multiple series of data any way you want.</p>
        </div>
    </div>

    <div class="row featurette">
        <div class="col-md-6">
            <h2 class="featurette-heading">Sub-Region Mode</h2>

            <p>In ECharts, we support World Map, China Map, Map of China Provinces & Cities. We also support sub-region
                mode, which develops sub-region maps from the main map types. In fact, ECharts can easily output the
                sketch maps of 176 countries and regions worldwide as well as over 600 cities nationwide. Try <a
                    href="./example/map8.html#-en" target="_blank">this 》</a></p>
        </div>
        <div class="col-md-6">
            <img src="./asset/img/subMapType.png" alt="Echarts Sub-Region Map"/>
        </div>
    </div>

    <div class="row featurette">
        <div class="col-md-6">
            <img src="./asset/img/example/map7.png" alt="Echarts Standard GeoJson Extension"/>
        </div>
        <div class="col-md-6">
            <h2 class="featurette-heading">GeoJson Map Extension</h2>

            <p>By compressing the standard GeoJson geographic data with efficient compression algorithm, we get the map
                data (only about 30% the size of the original standard geoJson data) to drive our built-in maps. If the
                built-in map data or types do not meet your project needs, you can always produce a new type yourself
                through simple dynamic registration. Try <a href="./example/map7.html#-en" target="_blank">this 》</a>
            </p>
        </div>
    </div>

    <div class="row featurette">
        <div class="col-md-6">
            <h2 class="featurette-heading">MarkPoint &amp; MarkLine</h2>

            <p>We are fully aware of the need for adding extra markPoints and markLines: we know you want to mark
                certain positions on map, extreme points on line and trend line on column...And that's why we make our
                markPoints and markLines applicable to all the chart types in ECharts library, and more than that:
                markPoints and markLines in ECharts boast interactive features responsive to components like Legend
                Switch and Scale Roaming, etc. </p>
        </div>
        <div class="col-md-3">
            <img src="./asset/img/example/line1.png" alt="Echarts MarkPoint & MarkLine" style="height:150px"/>
        </div>
        <div class="col-md-3">
            <img src="./asset/img/example/map9.png" alt="Echarts MarkPoint & MarkLine" style="height:150px"/>
        </div>
    </div>

    <div class="row featurette">
        <div class="col-md-3">
            <img src="./asset/img/doc/multiControl.jpg" alt="Echarts Multi-level Control" style="height:145px"/>
        </div>
        <div class="col-md-3">
            <img src="./asset/img/custom.png" alt="Echarts High Customizability"/>
        </div>
        <div class="col-md-6">
            <h2 class="featurette-heading">High Customizability</h2>

            <p>With over 600 configuration options and the design of multi-level control at hand, you are free to make
                your chart your way. </p>
            <a href="./doc-en.html" target="_blank">Documentation &raquo;</a>
        </div>
    </div>

    <div class="row featurette">
        <div class="col-md-6">
            <h2 class="featurette-heading">Event Interaction</h2>

            <p>We can capture user interaction and data change events to link chart to each other or the outside world.
                <a href="./example/mix3.html#-en" target="_blank">try this &raquo;</a></p>

            <p>Event debugging <a href="./example/event.html#-en" target="_blank">Try this &raquo;</a></p>
        </div>
        <div class="col-md-6">
            <img src="./asset/img/example/mix3.png" alt="Echarts Event Interaction"/>
        </div>
    </div>

    <div class="row featurette">
        <div class="col-md-6">
            <img src="./asset/img/example/bar11.png" alt="Echarts Timeline"/>
        </div>
        <div class="col-md-6">
            <h2 class="featurette-heading">Timeline</h2>

            <p>Dynamic data analysis is one of the most important features of information visualization. In ECharts, you
                can pair timeline with any chart type to display how data changes over time. </p>

            <p>Try <a href="./example/bar11.html#-en" target="_blank">bar »</a>、<a href="./example/scatter4.html#-en"
                                                                                   target="_blank">scatter »</a>、<a
                href="./example/pie7.html#-en" target="_blank">pie »</a>、<a href="./example/map14.html#-en"
                                                                            target="_blank">map »</a></p>
        </div>
    </div>
    <!-- /END THE FEATURETTES -->
</div>

<!-- FOOTER -->
<footer id="footer"></footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./asset/js/jquery.min.js"></script>
<script type="text/javascript" src="./asset/js/echartsHome.js"></script>
<script src="./asset/js/bootstrap.min.js"></script>
</body>
</html>
